<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>test</title>
	<style>
		table {
			border-collapse:collapse;
			text-align: center;
			margin-left:300px;
		}
		td {
			border:1px solid red;
			width:200px;
			height:30px;
		}
	</style>
</head>
<body>
	<table>
		<caption>什么东西</caption>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<script>
		var td =document.getElementsByTagName('td');
			for(var i=0;i<td.length;i++){
				td[i].addEventListener("click",function(){this.style.backgroundColor='red';},false);
				if(td[i].style.backgroundColor=='red'){
					td[i].addEventListener("click",function(){this.style.backgroundColor='white';},false);
				}
			}
			
	</script>
</body>
</html>
														
														
														
														
														